<template>
  <div class="box">
    <div class="tit">
      <span>{{ title }}</span>
      <p></p>
    </div>
    <div class="boxnav">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BoardBox',
  props: {
    title: String,
  },
}
</script>

<style scoped lang="scss">
.tit {
  display: flex;
  align-items: flex-end;
}
.tit span {
  background: url('~@/assets/images/board/line1.png') no-repeat bottom right;
  font-size: 22px;
  color: whitesmoke;
  white-space: nowrap;
  padding-bottom: 10px;
  padding-right: 20px;
}
.tit p {
  background: url('~@/assets/images/board/line2.png') no-repeat bottom right;
  width: 100%;
  height: 13px;
  margin-bottom: 5px;
  opacity: 0.5;
}
.boxnav {
  padding: 10px 0;
}
</style>
